<template>
  <div class="info-scroll">
    <div>
      <img src="@/assets/icon_horn.png" alt class="icon_horn" />
    </div>
    <div class="right">
      <div class="prise-wz">今日奖品:</div>
      <ul class="scroll-content" :style="{ top }">
        <li v-for="item in prizeList">{{item.list}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      prizeList: [
        { list: "海底捞火锅餐饮券" },
        { list: "苏福记火锅餐饮券" },
        { list: "重庆老板火锅餐饮券" },
        { list: "豪享来牛排双人套餐券" },
        { list: "哈根达斯冰淇淋券" }
      ],
      activeIndex: 0
    };
  },
  computed: {
    top() {
      return -this.activeIndex * 40 + "px";
    }
  },
 mounted() {
    setInterval(_ => {
      if(this.activeIndex < this.prizeList.length) {
        this.activeIndex += 1;
      } else {
        this.activeIndex = 0;
      }
    }, 1000);
  }
};
</script>
<style lang="less" scoped>
.info-scroll {
  background: #ffd737;
  margin: 4% auto 3%;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 5px;
  height: 40px;
  overflow: hidden;
  .prise-wz {
    font-size: 14px;
    padding-left: 5px;
  }
  .prise {
    font-size: 17px;
    padding-left: 10px;
    font-weight: bold;
    color: rgb(193, 73, 223);
  }
}
.info {
  text-align: center;
  color: #b8b8b8;
  margin-top: 15px;
}
.icon_horn {
  width: 76px / 1.7;
  height: 64px / 1.7;
}
.right {
  display: flex;
  height: 40px;
  line-height: 40px;
}
.scroll-content {
  position: relative;
  transition: top 0.9s;
}
li {
  font-size: 17px;
  padding-left: 10px;
  font-weight: bold;
  color: rgb(193, 73, 223);
  line-height: 40px;
}
</style>